<html>
<body onload="run();">
<script>
//DATA 
var list = [ "jana", "mojca", "pero" ]; // LIST
var people = [ 
	{ name: "jana", age: 30, loc: 'sevnica' }, 
	{ name: "mojca", age: 23, loc: '' }, 
	{ name: "pero", age: 28, loc: 'koper'} ];  // OBJECT LIST

var tpl = { 
	people: "<li><b>{name}</b> <small>{loc} ({age})</small></li>" ,
	people2: "<p style='{bgcolor}'><b>{name}</b> <small>{age} years {agestr}</small></p>" ,
	}; //MICRO TEMPLATES

</script>
<script src="jsGoo.js"></script>
<script>
function run()
{
	js = jsGoo;

	//test listPattern demo
	js.into('listDemo', js.list(list));
	
	//test listTplDemo demo
	js.into('listTplDemo', js.listTpl(people, tpl.people, 'ul'));
	
	//test listTplDemo demo
	js.into('listTplDemo', js.listTpl(people, tpl.people, 'ul'));

	//test assocApply
	js.into('assocApplyDemo', 
		js.listTpl(
			js.assocApply(people, {
					name: function (v,i,n){ return n+'('+i+'): '+v.toUpperCase() },
					loc:  function (v,i,n){ return v?v:'we have no idea'; },
					age:  function (v,i,n){ return '<span style="color: '+(i%2?'orange':'green')+';">'+v+'</span>'; },
				}
			), tpl.people, 'ul'));

		
	//test assocApply + objInject
	js.into('objInjectDemo', 
		js.listTpl(
			js.assocApply(
				js.objInject(people, {
						bgcolor: function(o, i){ return 'background-color: '+(i%2?'silver':'yellow')+';'; },
						agestr: function(o, i){ return (o.age>25?'old':'young'); },
				}), {
					name: function (v,i,n){ return (i+1)+') '+v.toUpperCase() },
					loc:  function (v,i,n){ return v?v:'we have no idea'; },
				}
			), tpl.people2, 'div'));
}
</script>
<h1>List pattern</h1>

<div id="listDemo">1</div>

<div id="listTplDemo">2</div>

<div id="assocApplyDemo">3</div>

<div id="objInjectDemo">4</div>
</body>
</html>